<template>
    <div ref="chartDom" :style="{ width: '100%', height: '400px' }"></div>
  </template>
  
  <script setup>
  import * as echarts from 'echarts'
  import { onMounted, ref, watch } from 'vue'
  
  // 接收传入的开始年份和结束年份
  const props = defineProps({
    startYear: {
      type: Number,
      required: true
    },
    endYear: {
      type: Number,
      required: true
    }
  })
  
  const chartDom = ref()
  let chart
  
  const initChart = (filteredData) => {
    chart = echarts.init(chartDom.value)
    chart.setOption({
        title: {
            text: `年度课时数统计 (${props.startYear} - ${props.endYear})`,
            left: 'center'
        },
        tooltip: {
            show: true,
            trigger: 'axis',
            axisPointer: {
            type: 'shadow'
            },
            formatter: (params) => {
                const xAxisValue = params[0]?.axisValue; // 获取 x 轴的值 (年份)
                const barInfo = params.find(param => param.seriesType === 'bar'); // 查找柱状图的数据
                return `${xAxisValue}<br/>${barInfo.marker} ${barInfo.seriesName}: ${barInfo.value}`;
            }
        },
        legend: {
            left: 'left'
        },
        xAxis: {
            name: '年份',
            type: 'category',
            data: filteredData.years, 
            axisLabel: {
            interval: 0,
            }
        },
        yAxis: {
            name: '课时',
            type: 'value'
        },
        toolbox: {
            show: true,
            feature: {
                restore: { show: true },
                saveAsImage: { show: true }
            }
        },
        series: [
            {
                name: '课时',
                type: 'bar',
                emphasis: {
                    focus: 'series'
                },
                data: filteredData.newMembers, // 过滤后的数据
                itemStyle: {
                    color: '#28A1FFB3'
                }
            },
            {
                type: 'line',
                data: filteredData.newMembers,
                itemStyle: {
                    color: '#28A1FFB3'
                },
                lineStyle: {
                    width: 2,
                },
                symbol: 'circle',
                symbolSize: 8,
            }
        ]
    })
  }
  
  const filterDataByYearRange = (startYear, endYear) => {
    // 模拟过滤后的年度数据
    const allData = {
        2024: 2315,
        2023: 2186,
        2022: 2011,
        2021: 2066,
        2020: 2059
    }
  
    const years = []
    const newMembers = []
    
    for (let year = startYear; year <= endYear; year++) {
      if (allData[year]) {
        years.push(year)
        newMembers.push(allData[year])
      }
    }
  
    return { years, newMembers }
  }
  
  watch(() => [props.startYear, props.endYear], ([newStartYear, newEndYear]) => {
    const filteredData = filterDataByYearRange(newStartYear, newEndYear)
    initChart(filteredData)
  })
  
  onMounted(() => {
    const filteredData = filterDataByYearRange(props.startYear, props.endYear)
    initChart(filteredData)
  })
  </script>
  
  <style scoped>
  /* Add any specific styles here */
  </style>
  